<div class="content">
	<script type="text/javascript">
	A = new Array();
	<?php foreach($chars as $c){

		echo 'A["'.$c->cyril.'"] = "'.$c->qazaqparat.'";';

	}

	?>
	</script>
    	<center><h1><b>‘translit.kz’</b> сайтының көмегімен қазақша мәтінді кирилл қарпінен латынға және керісінше аудара аласыз</h1></center>
    	<hr size="1" color="#6979b8" />

    	<div id="column1-wrap">
    		<span>Қазақша</span>
    		<button id="clear_text" type="submit" style="border: 0; background: transparent">
			    <img src="<?php echo Yii::app()->request->baseUrl; ?>/images/delete.png" width="72" height="27" alt="submit" />
			</button>
    		<!--<button id="change" type="submit" style="border: 0; background: transparent">
    			<img src="<?php echo Yii::app()->request->baseUrl; ?>/images/change.png" width="28" height="27" alt="submit" />
    		</button> -->
		    <div id="column1">
		    	<textarea onkeyup="oJS.strNormalize(this)" id="in" placeholder="Мәтінді енгізіңіз"></textarea>
		    </div>
		    <p>Мәтінді енгізіңіз немесе <a id="upload_trigger" href="#upload"><B>құжатты жүктеңіз</B></a></p>
		  
	
		</div>
		<div id="column2-wrap">
			<span>Qazaqşa</span>
    		<button id = "copying" type="submit" style="border: 0; background: transparent">
    			<img src="<?php echo Yii::app()->request->baseUrl; ?>/images/copy.png" width="82" height="27" alt="submit" />
    		</button>
    		<button onclick = "printOutput()" type="submit" style="border: 0; background: transparent">
    			<img src="<?php echo Yii::app()->request->baseUrl; ?>/images/print.png" width="142" height="27" alt="submit" />
    		</button>
			<div id="column2"  >
				<textarea placeholder = "Translïteracïya nәtïjesi" id="out" disabled></textarea>
			</div>
		</div>
		<div id="clear"></div>
		<div id="keyboard">
			<ul id="buttons">
				<li class="symbol"><span class="off">`</span><span class="on">~</span></li>
				<li class="symbol"><span class="off">1</span><span class="on">!</span></li>
				<li class="symbol"><span class="off">2</span><span class="on">@</span></li>
				<li class="symbol"><span class="off">3</span><span class="on">#</span></li>
				<li class="symbol"><span class="off">4</span><span class="on">$</span></li>
				<li class="symbol"><span class="off">5</span><span class="on">%</span></li>
				<li class="symbol"><span class="off">6</span><span class="on">^</span></li>
				<li class="symbol"><span class="off">7</span><span class="on">&amp;</span></li>
				<li class="symbol"><span class="off">8</span><span class="on">*</span></li>
				<li class="symbol"><span class="off">9</span><span class="on">(</span></li>
				<li class="symbol"><span class="off">0</span><span class="on">)</span></li>
				<li class="symbol"><span class="off">-</span><span class="on">_</span></li>
				<li class="symbol"><span class="off">=</span><span class="on">+</span></li>
				<li class="delete lastitem">delete</li>
				<li class="tab">tab</li>
				<li class="letter">й</li>
				<li class="letter">ц</li>
				<li class="letter">у</li>
				<li class="letter">к</li>
				<li class="letter">е</li>
				<li class="letter">н</li>
				<li class="letter">г</li>
				<li class="letter">ш</li>
				<li class="letter">щ</li>
				<li class="letter">з</li>
				<li class="letter">х</li>
				<li class="letter">ъ</li>
				<li class="symbol lastitem"><span class="off">\</span><span class="on">|</span></li>
				<li class="capslock">caps lock</li>
				<li class="letter">ф</li>
				<li class="letter">ы</li>
				<li class="letter">в</li>
				<li class="letter">а</li>
				<li class="letter">п</li>
				<li class="letter">р</li>
				<li class="letter">о</li>
				<li class="letter">л</li>
				<li class="letter">д</li>
				<li class="letter">ж</li>
				<li class="letter">э</li>
				<li class="return lastitem">return</li>
				<li class="left-shift">shift</li>
				<li class="letter">я</li>
				<li class="letter">ч</li>
				<li class="letter">с</li>
				<li class="letter">м</li>
				<li class="letter">и</li>
				<li class="letter">т</li>
				<li class="letter">ь</li>
				<li class="letter">б</li>
				<li class="letter">ю</li>
				<li class="symbol"><span class="off">/</span><span class="on">?</span></li>
				<li class="right-shift lastitem">shift</li>
				<li class="space lastitem">&nbsp;</li>
			</ul>
		</div>
		<div id="description">
			<center>
				<h2>ТРАНСЛИТЕРАЦИЯ ДЕГЕН НЕ?</h2>
				<p>Транслитерация (лат. trans - арқылы, littera - әріп) — бір жазудағы әріптерді екінші бір жазудын әріптерімен, яғни бір әліпбидегі 
жазуды баска бір әліпбиге ауыстыру. Егер сөздердін дыбыстық құрамына әліпби сәйкес келсе, онда әліпби ауыстыру қиындық 
келтірмейді. Ал сөздердін дыбыстық құрамына әліпби сәйкеспеген жағдайда оларды жазу күрделенеді. Қазақ жазуын 
араб әліпбиінен латынға, латыннан орыс әліпбиіне ауыстыруда бірқатар қиындық туғаны мәлім.</p>
			</center>
		</div>
		<div id="clear"></div>
	</div><!-- end .content -->